<!DOCTYPE html>
<#assign ctx=Session.basePath>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>轨迹查询</title>
    <script>
        var shipid = '<#if shipid??>${shipid}<#else></#if>';
        var iemi = '<#if iemi??>${iemi}<#else></#if>';
        var company =  '<#if company??>${company}<#else></#if>';
    </script>
    <link href="${ctx}/easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <link href="${ctx}/easyui/themes/icon.css" rel="stylesheet" />
    <link href="${ctx}/inspiniain/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
    <script src="${ctx}/js/jquery-1.12.2.min.js"></script>
    <script src="${ctx}/easyui/jquery.easyui.min.js"></script>
    <script src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <style>
        th{
            border: solid 1px darkgrey;
        }
        tr{
            font-size: 12px;
            border-bottom: 1px solid black;
        }
        .a{
            color: #00AA91;
        }
        td{
            border: solid 1px darkgrey;
            text-align: center;
        }
    </style>
</head>
<body>
<table id="dg"  cellspacing="0"  cellspacing="0">
    <thead>
    <tr>
        <th width="15px"></th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th width="40px">定位</th>
    </tr>
    </thead>
</table>
</body>
<script>
    var mapObj;
    $(document).ready(function() {
        loadAll();
    });

    $(document).on("click", ".a", function() {
        $(this).parent().parent().siblings().css("background-color","white");
       $(this).parent().parent().css("background-color","#6193C3");
    })

    function loadAll() {
        $.ajax({
            url:'http://cloud.zmsa.com.cn:8081/net/ashx/GetNavHistory.ashx',
            type:"POST",
            data:{
                imei:'${trail.iemi}',
                start:'${trail.startTime}',
                end:'${trail.endTime}'
            },
            success:function (data) {
                var list=JSON.parse(data).list;
                mapObj= window.parent.mapArray[window.parent.selectedMapId-1];
                for (var i= 0; i < list.length; i++) {
                    var center= window.parent.format.readFeature(list[i].center, {
                        dataProjection: 'EPSG:4326',
                        featureProjection: 'EPSG:3857'
                    });
                    var lonLat=window.parent.ol.proj.toLonLat(center.getGeometry().flatCoordinates);
                    var lon=lonLat[0];
                    var lat=lonLat[1];
                    $("#dg").append("<tr>" +
                            "<td>"+list[i].lineid+"</td>" +
                            "<td>"+list[i].start+"</td>" +
                            "<td>"+list[i].end+"</td>" +
                            "<td>"+"<a class='a' href='#' onclick='locationMap(\""+lon+"\",\""+lat+"\")'><i style='font-size:20px;' class='fa fa-map-marker'></i></a>"+"</td>" +
                            "</tr>")

                    var feature = window.parent.format.readFeature(list[i].geom, {
                        dataProjection: 'EPSG:4326',
                        featureProjection: 'EPSG:3857'
                    });

                    var startFeature=new  window.parent.ol.Feature({
                        geometry: new  window.parent.ol.geom.Point([feature.getGeometry().flatCoordinates[0],feature.getGeometry().flatCoordinates[1]]),
                        population: 4000,
                        rainfall: 500
                    });
                    var endFeature=new  window.parent.ol.Feature({
                        geometry: new  window.parent.ol.geom.Point([feature.getGeometry().flatCoordinates[feature.getGeometry().flatCoordinates.length-2],feature.getGeometry().flatCoordinates[feature.getGeometry().flatCoordinates.length-1]]),
                        population: 4000,
                        rainfall: 500
                    });
                    startFeature.setStyle(window.parent.startIconStyle);
                    endFeature.setStyle(window.parent.endIconStyle);

                    mapObj.trailSource.addFeature(feature);
                    mapObj.trailSource.addFeature(startFeature);
                    mapObj.trailSource.addFeature(endFeature);
                }
            }
        })
    }

    function locationMap(lon,lat) {
        window.parent.locTrail(mapObj,lon,lat);
    }
</script>